<template>
  <div style="background-color: #ffffff;padding: 16px 20px;margin-bottom: 20px;border-radius: 4px;box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 3%);">
    <label style="font-size: 18px;font-weight: 400;color: #333333;">园区: </label>&nbsp;
    <!-- <el-button
      :type="isChooseAll()"
      style="width: 6%;margin:5px 5px;"
      @click="parkChoodeAll()">
      全部
    </el-button> -->
    <el-tooltip class="item" effect="dark" :content="item.longName" placement="top-start"  v-for="item in parkList1" :key="item.code">
      <el-button
        :disabled="item.valid !== 1"
        :type="isParkChoose(item.code)"
        style="width: 8%;margin:5px 5px;"
        @click="parkChange(item)">
        {{item.name}}
      </el-button>
    </el-tooltip>
    <label class="more-label" @click="moreParkShow = !moreParkShow">更多园区</label>
    <img src="../assets/img/down-arrow.png" alt="" @click="moreParkShow = !moreParkShow">
    <div>
      <el-tooltip class="item" effect="dark" :content="item.longName" placement="top-start"  v-for="item in parkList2" :key="item.code">
        <el-button
          :disabled="item.valid !== 1"
          :type="isParkChoose(item.code)"
          style="width: 8%;margin:5px 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left: 5px;"
          @click="parkChange(item)">
          {{item.name}}
        </el-button>
      </el-tooltip>
    </div>
    <div v-show="moreParkShow">
      <el-tooltip class="item" effect="dark" :content="item.longName" placement="top-start"  v-for="item in parkList3" :key="item.code">
        <el-button
          :disabled="item.valid !== 1"
          :type="isParkChoose(item.code)"
          style="width: 8%;margin:5px 5px;"
          @click="parkChange(item)">
          {{item.name}}
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  props: {
    getParkCodeOnly: {
      default: () => {},
      type: Function
    },
    getParkCode: {
      default: () => {},
      type: Function
    },
    getParkDetail: {
      default: () => {},
      type: Function
    },
    getParkNameMap: {
      default: () => {},
      type: Function
    }
  },
  data () {
    return {
      moreParkShow: false,
      chooseParkList: [],
      parkList: [],
      parkList1: [],
      parkList2: [],
      parkList3: [],
      dataForm: {
        username: 'xinanjituan',
        password: 'Xinanjituan2421',
        grant_type: 'password',
        appCode: 'PLANTMATE_OFFICIAL',
        client_id: 'android',
        loginType: '0'
      }
    }
  },
  mounted () {
    this.getParkList()
  //   const Base64 = require('js-base64').Base64
  //   // { password: Base64.encode(this.dataForm.password) }
  //   let params = Object.assign({}, this.dataForm)
  //   params.password = Base64.encode(this.dataForm.password)
  //   this.$http.post(window.SITE_CONFIG['sitURL'] + '/auth/login', params,
  //     {
  //       headers: {
  //         // 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
  //         // 'Authorization': 'Basic cmVucmVuaW86cmVucmVuaW8='
  //       }
  //     }
  //   ).then(({ data: res }) => {
  //     if (res.code !== 0) {
  //       return false
  //       // this.$message.error(res.message)
  //     }
  //     Cookies.set('access_token', res.data.access_token)
  //     window.SITE_CONFIG['permissions'] = res.data.permissions || []
  //     this.getUserInfo()
  //   })
  },
  methods: {
    isChooseAll () {
      if (this.chooseParkList.length === 0) {
        return 'primary'
      } else {
        return ''
      }
    },
    // 获取当前管理员信息
    getUserInfo () {
      this.$http.get(window.SITE_CONFIG['sitURL'] + '/front/consumer/usercenter/custUserCenterInfo', {
        params: {
          appCode: 'PLANTMATE_OFFICIAL',
          companyId: ''
        }
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          this.$store.dispatch('companyList', res.data.companyAccountInfo || [])
          this.$store.dispatch('setUserInfo', res.data.userInfo)
          this.getDateForm()
        })
    },
    // 获取详细信息数据
    getDateForm () {
      this.$http.get(window.SITE_CONFIG['sitURL'] + `/help/user/sys/custCompany/queryOrgInfo/${localStorage.getItem('defaultCompanyId')}`)
        .then(({ data: res }) => {
          localStorage.setItem('companyId', res.data.companyId)
          localStorage.setItem('cid', res.data.socialCreditCode)
          localStorage.setItem('mobile', res.data.mobile)
          localStorage.setItem('email', res.data.mail)
          let params = {
            token: Cookies.get('access_token'),
            userId: localStorage.getItem('userId'),
            userName: localStorage.getItem('userName'),
            cid: localStorage.getItem('cid')
          }
          this.$http.post('/home/redis/saveUserToRedis', params)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return false
              }
              this.getParkList()
            })
        })
    },
    // parkChoodeAll () {
    //   this.chooseParkList.splice(0, this.chooseParkList.length)
    //   this.parkList.forEach(item => {
    //     item.isChoose = false
    //   })
    //   let coordinates = []
    //   this.parkList.forEach((item) => {
    //     if (item.valid === 1) {
    //       let coordinate = {
    //         name: item.name,
    //         latitude: item.latitude,
    //         longitude: item.longitude,
    //         cityLatitude: item.cityLatitude,
    //         cityLongitude: item.cityLongitude
    //       }
    //       coordinates.push(coordinate)
    //     }
    //   })
    //   this.getParkCode('')
    //   this.getParkCodeOnly('')
    //   let parkDetail = {
    //     code: '',
    //     coordinateList: coordinates
    //   }
    //   this.getParkDetail(parkDetail)
    // },
    parkChange (park) {
      // let index = this.chooseParkList.indexOf(park.code)
      // if (index !== -1) {
      //   this.chooseParkList.splice(index, 1)
      //   this.parkList.forEach(item => {
      //     if (item.code === park.code) {
      //       item.isChoose = false
      //     }
      //   })
      // } else {
      //   this.chooseParkList.push(park.code)
      //   this.parkList.forEach(item => {
      //     if (item.code === park.code) {
      //       item.isChoose = true
      //     }
      //   })
      // }
      // this.getParkCode(this.chooseParkList.join(','))
      this.getParkCodeOnly(park.code)
      let coordinates = []
      let coordinate = {
        name: park.name,
        latitude: park.latitude,
        longitude: park.longitude,
        cityLatitude: park.cityLatitude,
        cityLongitude: park.cityLongitude
      }
      coordinates.push(coordinate)
      let parkDetail = {
        code: park.code,
        coordinateList: coordinates
      }
      this.getParkDetail(parkDetail)
      // let parkArr = this.parkList.filter(item => {
      //   return item.isChoose
      // })
      // let coordinates = []
      // if (parkArr.length === 0) {
      //   parkArr.push(this.parkList[0])
      //   this.parkList.forEach((item) => {
      //     if (item.valid === 1) {
      //       let coordinate = {
      //         name: item.name,
      //         latitude: item.latitude,
      //         longitude: item.longitude
      //       }
      //       coordinates.push(coordinate)
      //     }
      //   })
      // }
      // if (parkArr.length > 0) {
      //   parkArr.forEach((item) => {
      //     let coordinate = {
      //       name: item.name,
      //       latitude: item.latitude,
      //       longitude: item.longitude
      //     }
      //     coordinates.push(coordinate)
      //   })
      // }
      // let parkDetail = {
      //   code: this.chooseParkList.join(','),
      //   coordinateList: coordinates
      // }
      // this.getParkDetail(parkDetail)
    },
    isParkChoose (park) {
      if (this.chooseParkList.indexOf(park) !== -1) {
        return 'primary'
      } else {
        return ''
      }
    },
    getParkList () {
      this.$http.get(`/home/chemical/parkInfo/selectParkAll`, {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let parkArr = []
          let parkNameMap = new Map()
          res.data.forEach(item => {
            parkArr.push(
              {
                code: item.code,
                name: item.nameAbbreviation,
                valid: item.valid,
                latitude: item.latitude,
                longitude: item.longitude,
                isChoose: false,
                cityLatitude: item.cityLatitude,
                cityLongitude: item.cityLongitude,
                longName: item.name
              }
            )
            parkNameMap.set(item.nameAbbreviation, item.name)
          })
          this.parkList = parkArr
          this.parkList1 = parkArr.slice(0, 10)
          this.parkList2 = parkArr.slice(10, 21)
          this.parkList3 = parkArr.slice(21)
          this.getParkNameMap(parkNameMap)
          // if (parkArr.length > 0) {
          //   // this.chooseParkList.push(parkArr[0].code)
          //   this.getParkCode(parkArr[0].code)
          //   this.getParkCodeOnly(parkArr[0].code)
          //   this.parkList[0].isChoose = true
          //   let coordinate = [
          //     {
          //       name: this.parkList[0].name,
          //       latitude: this.parkList[0].latitude,
          //       longitude: this.parkList[0].longitude
          //     }
          //   ]
          //   let parkDetail = {
          //     code: parkArr[0].code,
          //     coordinateList: coordinate
          //   }
          //   this.getParkDetail(parkDetail)
          // }
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-button {
    padding-left: 0;
    padding-right: 0;
  }
  .more-label {
    font-size: 16px;
    font-weight: 500;
    color: #1492ff;
    margin-left: 20px;
  }
</style>
